'use client'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import { P, match } from 'ts-pattern'
import { Button, Layout, theme } from 'antd';
import { Navigate, Route, Routes, BrowserRouter } from "react-router-dom"
import React, { useState, useMemo, Suspense, createContext } from 'react';

import Sider from './Sider/page';
import routes from "@/config/routes";
import NotFound from '@/pages/notFound';
import Breadcrumb from './Breadcrumb/page';

// context - 路由
export const layoutContext = createContext({
    routes: [],
    flatedRoutes: [],
})

export default function Home() {

    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const [collapsed, setCollapsed] = useState(false);

    // 平铺的路由，匹配菜单
    const flatedRoutes = useMemo(() => {
        const list = []
        flatRoutes(routes)
        function flatRoutes(routes) {
            for (const route of routes) {
                list.push(route)
                // 获取到最深一级的页面路由
                if (route.children?.length) {
                    flatRoutes(route.children)
                }
            }
        }
        return list
    }, [routes])

    const defaultHomePagePath = getDefaultRoutePath(flatedRoutes)

    // context
    const contextValue = useMemo(
        () => ({ routes, flatedRoutes }),
        [flatedRoutes, routes]
    )

    // 路由
    const renderedRoutes = useMemo(
        () =>
            flatedRoutes.map((route, index) => (
                <Route
                    key={route.path}
                    path={route.path}
                    element={
                        match(route.component)
                            .with(P.not(P.nullish), (Comp) => <Suspense>{<Comp />}</Suspense>)
                            .with(P.nullish, () => <Navigate to={getDefaultRoutePath([route])} replace />)
                            .exhaustive()
                    }
                />
            )),
        [flatedRoutes]
    )

    return (
        <BrowserRouter>
            <layoutContext.Provider value={contextValue}>
                <Layout>
                    <Layout>
                        <Layout.Sider
                            style={{
                                background: '#001529',
                            }}
                            trigger={null} collapsible collapsed={collapsed}
                        >
                            <Sider />
                        </Layout.Sider>
                        <Layout
                            style={{
                                background: '#F5F5F5'
                            }}
                        >
                            <Layout.Header style={{
                                padding: 0,
                                height: 64,
                                background: colorBgContainer,
                            }}>
                                <Button
                                    type="text"
                                    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                                    onClick={() => setCollapsed(!collapsed)}
                                    style={{
                                        fontSize: '16px',
                                        width: 64,
                                        height: 64,
                                    }}
                                />
                            </Layout.Header>
                            <Layout
                                style={{
                                    padding: '0 24px 24px',
                                    height: 'calc(100vh - 64px)'
                                }}
                            >
                                <Breadcrumb />
                                <Layout.Content
                                    style={{
                                        padding: 24,
                                        margin: 0,
                                        minHeight: 280,
                                        background: colorBgContainer,
                                        borderRadius: borderRadiusLG,
                                    }}
                                >
                                    <Routes>
                                        {renderedRoutes}
                                        <Route
                                            path="/"
                                            element={<Navigate to={defaultHomePagePath} replace />}
                                        />
                                        <Route
                                            path="/404"
                                            element={<Suspense>{<NotFound />}</Suspense>}
                                        />
                                        <Route
                                            path="/404"
                                            element={<Navigate to="/404" replace />}
                                        />
                                    </Routes>
                                </Layout.Content>
                                <Layout.Footer
                                    style={{
                                        textAlign: 'center',
                                    }}
                                >L ©{new Date().getFullYear()} Created by XISU</Layout.Footer>
                            </Layout>
                        </Layout>
                    </Layout>
                </Layout>
            </layoutContext.Provider>
        </BrowserRouter>
    );
}




function getDefaultRoutePath(routes) {
    if (routes?.length) {
        if (routes[0].children?.length) {
            return getDefaultRoutePath(routes[0].children)
        } else {
            return routes[0].path
        }
    }
    return '/'
}